<template>
  <div class="list">
    <div class="top1">
      <SearchTop :searchShow="searchShow">
        <div><span class="iconfont icon-31shouye"></span></div>
      </SearchTop>
    </div>

    <div class="content">
      <div class="left">
        <div
          @click="changeIndex(index)"
          :class="{ active: currentIndex == index }"
          class="sort"
          v-for="(item, index) in leftdata"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
      <div class="right" ref="wrapper">
        <div class="box">
          <div class="son" v-for="(item, index) in rightdata" :key="index">
            <div class="title">{{ item.name }}</div>
            <div class="goodsListBox">
              <div
                class="goodsList"
                v-for="(item2, index2) in item.list"
                :key="index2"
              >
                <div class="photo">
                  <img
                    src="https://img.tea7.com/0011478_0.jpeg?x-oss-process=image/resize,w_150"
                    alt=""
                  />
                </div>
                <div class="name">{{ item2.name }}</div>
              </div>
            </div>
          </div>
          <div class="block"></div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <tarbar></tarbar>
    </div>
  </div>
</template>

<script>
import SearchTop from "@/components/search/searchTop";
import tarbar from "../components/common/tarbar";
import http from "@/common/api/request";
import BetterScroll from "better-scroll";
// 引入节流
import throttle from "lodash/throttle.js";
export default {
  components: {
    SearchTop,
  },
  data() {
    return {
      searchShow: true,
      chooseSortIndex: 0,
      leftdata: [],
      rightdata: [],
      // 承载右侧每一块的高度值
      allHeight: [],
      rightScroll: "",
      scrollY: "", //右侧滚动距离
    };
  },
  methods: {
    changeIndex(index) {
      // 改变右侧高度的位置
      this.rightScroll.scrollTo(0, -this.allHeight[index], 300);
    },
  },
  mounted() {
    http
      .$axios({
        url: "/api/listInfo",
      })
      .then((res) => {
        res.data.data.forEach((item) => {
          this.leftdata.push(item.name);
          this.rightdata.push(item.data[0]);
        });
      });
  },
  watch: {
    rightdata() {
      // 数据渲染完毕在生成betterScroll实例
      this.$nextTick(() => {
        this.rightScroll = new BetterScroll(this.$refs.wrapper, {
          probeType: 3,
          click: true,
          //x轴偏移量
          startX: 1,
          scrollX: false,
          movable: true,
          zoom: true,
        });

        // 统计每一块的高度值，并放入数组中
        let height = 0;
        this.allHeight.push(height);
        // 获取每一块的高度
        let uls = this.$refs.wrapper.getElementsByClassName("son");
        // 把dom转化数组
        Array.from(uls).forEach((item) => {
          height += item.clientHeight;
          this.allHeight.push(height);
        });

        // 得到右侧滚动的值
        this.rightScroll.on("scroll", (pos) => {
          this.scrollY = Math.abs(pos.y);

          
          
        });
      });
    },
  },
  computed: {
    currentIndex() {
      // 寻找下标 findIndex返回一个下标
      return this.allHeight.findIndex((item, index) => {
        return this.scrollY >= item && this.scrollY < this.allHeight[index + 1];
      });
    },
  },

  components: {
    tarbar,
  },
};
</script>

<style scoped lang='scss'>
.active {
  border-left: 3px solid #b0352f;
  color: #b0352f;
}
.iconfont {
  font-size: 6vw;
}
.list {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  .content {
    overflow: hidden;
    display: flex;

    flex: 1;
    background-color: white;
    position: relative;

    .left {
      width: 2.5rem;
      height: 100%;
      font-size: 0.3902rem;
      border-right: 1px solid #efefef;
      .sort {
        height: 0.8049rem;
        line-height: 0.8049rem;
        margin: 4vw 0;
      }
    }
    .right {
      flex: 1;
      height: 100%;
      overflow: hidden;

      .title {
        font-size: 0.439rem;
      }
      .block {
        width: 100%;
        height: 60vh;
        background-color: white;
      }
      .son {
        padding: 0.3415rem;
        display: flex;
        flex-direction: column;
        .goodsListBox {
          padding-bottom: 5vw;
          display: flex;
          flex-wrap: wrap;
        }
        .goodsList {
          padding: 0.1839rem;
          img {
            width: 100%;
            height: 100%;
          }
          width: 1.8293rem;
          height: 1.9512rem;
          .photo {
            width: 1.4878rem;
            height: 1.4878rem;
            margin: 0 auto;
          }
          .name {
            font-size: 0.34rem;
          }
        }
      }
    }
  }
}
.top {
  height: 50vw;
  background-color: green;
}
</style>